<template>
    <div class="container f fv fac">
        <div class="banner f fv fpc">
            <div style="padding-left: 60px;">
                <div class="title">发现精彩电影世界</div>
                <div class="tip">超过10000部精选电影，带给您极致观影体验</div>
                <el-button type="primary">立即探索</el-button>
            </div>
        </div>

        <div class="hotting item">
            <div class="list f fac fv">
                <div class="f fac fpj title-box">
                    <div class="title">正在热映</div>
                    <div class="more">查看更多</div>
                </div>
                <div class="f fac fpj" style="width: 100%;">
                    <div class="item" v-for="item in isHotting">
                        <img :src="item.url" alt="">
                        <div style="padding: 12px;">
                            <div class="name">{{ item.name }}</div>
                            <div class="score f fac">
                            <el-icon color="#FACC15" size="20px"><StarFilled /></el-icon>
                            <span style="margin-left: 4px;">{{ item.score }}</span>
                            </div>
                            <div class="cate">
                                {{ item.cate }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="beon item">
            <div class="list f fac fv">
                <div class="f fac fpj title-box">
                    <div class="title">即将上映</div>
                    <div class="more">查看更多</div>
                </div>
                <div class="f fac fpj" style="width: 100%;">
                    <div class="item" v-for="item in beon">
                        <img :src="item.url" alt="">
                        <div style="padding: 12px;">
                            <div class="name">{{ item.name }}</div>
                            <div class="cate">
                                {{ item.cate }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="cinema item">
            <div class="list f fac fv">
                <div class="f fac fpj title-box">
                    <div class="title">热门影院</div>
                    <div class="more"></div>
                </div>
                <div class="f fac fpj" style="width: 100%;">
                    <div class="item" v-for="item in cinema">
                        <div class="name">{{ item.name }}</div>
                        <div class="location">{{ item.location }}</div>
                        <div class="price f fac fpj">
                            <span class="num">￥{{ item.price }}</span>
                            <span>起</span>
                        </div>
                        <div class="button">
                            <el-button type="primary">选座购票</el-button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>    
    import lldq from "@/assets/lldq.png"
    import nhlhy from "@/assets/nhlhy.png"
    import wm from "@/assets/wm.png"
    import mjh from "@/assets/mjh.png"
    import xcm from "@/assets/xcm.png"
    import bxjg from "@/assets/bxjg.png"
    import nz from "@/assets/nz.png"
    import dzd from "@/assets/dzd.png"
    import bb from "@/assets/bb.png"

    const isHotting = ref([
        { name: '流浪地球', url: lldq, score: 9.2, cate: '科幻/冒险' },
        { name: '你好，李焕英', url: nhlhy, score: 8.9, cate: '爱情/剧情' },
        { name: '无名', url: wm, score: 8.7, cate: '悬疑/动作' },
        { name: '满江红', url: mjh, score: 8.8, cate: '剧情/古装' },
        { name: '熊出没', url: xcm, score: 8.5, cate: '动画/冒险' },
    ])

    const beon = ref([
        { name: '变形金刚', url: bxjg, cate: '科幻/动作' },
        { name: '哪吒之魔童降世', url: nz,  cate: '动画/剧情' },
        { name: '碟中谍', url: dzd, cate: '悬疑/动作' },
        { name: '芭比', url: bb, cate: '喜剧/奇幻' },
    ])

    const cinema = ref([
        { name: '万达影城', location: '北京市朝阳区', price: 34 },
        { name: 'CGV影城', location: '重庆市渝中区', price: 43 },
        { name: '越界影城', location: '天津市', price: 45 },
    ])
</script>

<style lang="scss" scoped>
.container {
    width: 100%;
    .banner {
        width: 100%;
        height: 600px;
        background: url('../assets/banner.png') center no-repeat;
        background-size: cover;
        color: #fff;
        .title {
            font-size: 48px;
            font-weight: bold;
        }
        .tip {
            font-size: 20px;
            margin-top: 12px;
        }
        .el-button {
            width: 136px;
            margin-top: 60px;
        }
    }
    .item {
        width: 100%;
        padding: 48px 0;
        .title {
            font-size: 24px;
            font-weight: bold;
        }
        .more {
            font-size: 16px;
            color: var(--el-color-primary);
            cursor: pointer;
        }
        .list {
            padding: 0 20%;
            .title-box {
                width: 100%;
                margin-bottom: 32px;
            }
            .item {
                width: 18%;
                border-radius: 10px;
                overflow: hidden;
                background-color: #fff;
                padding: 0;
                box-shadow: 0px 4px 6px -4px rgba(0, 0, 0, 0.1),0px 10px 15px -3px rgba(0, 0, 0, 0.1);
                img {
                    width: 100%;
                    height: 360px;
                }
                .name {
                    font-size: 16px;
                    font-weight: bold;
                    margin-top: 4px;
                }
                .score {
                    font-size: 14px;
                    color: #4B5563;
                    margin-top: 4px;
                    margin-bottom: 2px;
                }
                .cate {
                    font-size: 14px;
                    color: #6B7280;
                }
            }
        }
    }
    .hotting {
        background-color: #f9fafb;
    }

    .beon {
        .list {
            .item {
                width: 24%;
                background-color: #f9fafb;
            }
        }
    }
    .cinema {
        background-color: #f9fafb;
        .list {
            .item {
                width: 32%;
                padding: 24px;
                
                .name {
                    font-size: 20px;
                    font-weight: bold;
                }
                .location {
                    font-size: 16px;
                    color: #4B5563;
                    margin: 8px 0;
                }
                .price {
                    font-size: 14px;
                    .num {
                        font-size: 20px;
                        font-weight: bold;
                        color: var(--el-color-primary);
                    }
                }
                .button {
                    width: 100%;
                    margin-top: 4px;
                    .el-button {
                        width: 100%;
                    }
                }
            }
        }
    }
}
</style>